<template>
	<main-content
		:tableHeight.sync="tableHeight"
		:otherDependenComponents="otherDependenComponents"
	>
		<template slot="query">
			<el-form
				ref="form"
				:inline="true"
				:model="queryData"
				label-width="auto"
			>
				<el-form-item label="所属商户:" prop="merchantId">
					<merchant-select
						v-model="queryData.merchantId"
						placeholder="默认选择全部"
						@change="selectMerchantHandle"
					></merchant-select>
				</el-form-item>
				<el-form-item
					:label="
						`${$t(
							'funds.thirdPeymentChannelConfig.payment_merchant_name'
						)}:`
					"
				>
					<el-select
						v-model="queryData.paymentMerchantId"
						:popper-append-to-body="false"
						clearable
						:placeholder="$t('common.select_all')"
					>
						<el-option
							v-for="item in paymentMerchantList"
							:key="item.id"
							:label="item.paymentMerchantName"
							:value="item.id"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item :label="`${$t('funds.channel_name')}:`">
					<el-input
						v-model="queryData.channelName"
						clearable
						size="medium"
						:placeholder="$t('common.please_enter')"
						@keyup.enter.native="enterSearch"
						@blur="cleanBlankSpace('queryData', 'channelName')"
					></el-input>
				</el-form-item>
				<el-form-item :label="`${$t('funds.pay_type')}:`">
					<el-select
						v-model="queryData.payType"
						:popper-append-to-body="false"
						clearable
						:placeholder="$t('common.select_all')"
					>
						<el-option
							v-for="item in payTypeList"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item
					:label="
						`${$t(
							'funds.thirdPeymentChannelConfig.channel_status'
						)}:`
					"
				>
					<el-select
						v-model="queryData.status"
						:popper-append-to-body="false"
						clearable
						:placeholder="$t('common.select_all')"
					>
						<el-option
							:label="$t('funds.enable')"
							:value="1"
						></el-option>
						<el-option
							:label="$t('funds.disable')"
							:value="0"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item style="margin-left: 8px">
					<el-button
						type="primary"
						icon="el-icon-search"
						:disabled="loading"
						size="medium"
						@click="search"
					>
						{{ $t('common.search') }}
					</el-button>
					<el-button
						icon="el-icon-refresh-left"
						:disabled="loading"
						size="medium"
						@click="reset"
					>
						{{ $t('common.reset') }}
					</el-button>
					<el-button
						v-if="hasPermission('401021')"
						size="medium"
						type="success"
						@click="openEditDialog({})"
					>
						{{ $t('common.add') }}
					</el-button>
				</el-form-item>
			</el-form>
		</template>
		<template slot="content">
			<el-table
				v-loading="loading"
				element-loading-spinner="el-icon-loading"
				border
				size="mini"
				class="small-size-table"
				:data="dataList"
				style="width: 100%"
				:max-height="tableHeight"
			>
				<el-table-column
					prop="index"
					align="center"
					:label="$t('common.serial_number')"
					:width="getWidth(50, 1.3)"
				>
					<template slot-scope="scope">
						{{ pageSize * (pageNum - 1) + scope.$index + 1 }}
					</template>
				</el-table-column>
				<el-table-column
					prop="paymentMerchantName"
					align="center"
					:label="
						`${$t(
							'funds.thirdPeymentChannelConfig.payment_merchant_name'
						)}`
					"
					min-width="130"
				>
					<template slot-scope="scope">
						{{ scope.row.paymentMerchantName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="channelName"
					align="center"
					:label="`${$t('funds.channel_name')}`"
					min-width="130"
				>
					<template slot-scope="scope">
						{{ scope.row.channelName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="payType"
					align="center"
					:label="`${$t('funds.pay_type')}`"
					min-width="130"
				>
					<template slot-scope="scope">
						{{
							typeFilter(scope.row.payType, 'withdrawMemberPaymentType')
						}}
					</template>
				</el-table-column>
				<!-- <el-table-column
						prop="payType"
						align="center"
						:label="
							`${$t('funds.thirdPeymentChannelConfig.paymen_channel_name')}`
						"
						min-width="130"
					>
						<template slot-scope="scope">
							{{ scope.row.payName || '-' }}
						</template>
					</el-table-column> -->
				<el-table-column
					prop="status"
					align="center"
					:label="
						`${$t(
							'funds.thirdPeymentChannelConfig.channel_status'
						)}`
					"
					min-width="130"
				>
					<template slot-scope="scope">
						<el-tag v-if="scope.row.status == 1" type="success">
							{{ $t('funds.enable') }}
						</el-tag>
						<el-tag v-else type="danger">
							{{ $t('funds.disable') }}
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column
					prop="currency"
					align="center"
					:label="
						`${$t(
							'funds.thirdPeymentChannelConfig.support_currency'
						)}`
					"
					min-width="130"
				>
					<template slot-scope="scope">
						{{
							typeFilter(
								scope.row.currency,
								'paymentCurrencyType'
							) || '-'
						}}
					</template>
				</el-table-column>
				<el-table-column
					prop="singleLimit"
					align="center"
					:label="
						`${$t('funds.thirdPeymentChannelConfig.single_limit')}`
					"
					min-width="130"
				>
					<template slot-scope="scope">
						{{
							scope.row.maxAmount && scope.row.minAmount
								? `${scope.row.minAmount}~${
										scope.row.maxAmount
								  }`
								: '-'
						}}
					</template>
				</el-table-column>
				<el-table-column
					prop="fastAmount"
					align="center"
					:label="$t('funds.thirdPeymentChannelConfig.fast_amount')"
					min-width="130"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.fastAmount || '-' }}
					</template>
				</el-table-column>
				<!-- <el-table-column
						prop="remark"
						align="center"
						:label="$t('funds.thirdPeymentChannelConfig.fast_amount')"
						min-width="130"
					>
						<template slot-scope="scope">
							{{ scope.row.fastAmount || '-' }}
						</template>
					</el-table-column> -->
				<el-table-column
					prop="remark"
					align="center"
					:label="$t('common.remark')"
					min-width="130"
				>
					<template slot-scope="scope">
						{{ scope.row.remark || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="createdBy"
					align="center"
					:label="$t('common.createBy')"
					min-width="130"
				>
					<template slot-scope="scope">
						{{ scope.row.createdBy || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="createdAt"
					align="center"
					:label="$t('common.createAt')"
					min-width="130"
				>
					<template slot-scope="scope">
						{{ scope.row.createdAt || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="updatedBy"
					align="center"
					:label="$t('common.last_updateBy')"
					min-width="130"
				>
					<template slot-scope="scope">
						{{ scope.row.updatedBy || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="updatedAt"
					align="center"
					:label="$t('common.last_updateAt')"
					min-width="130"
				>
					<template slot-scope="scope">
						{{ scope.row.updatedAt || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="auditStep"
					align="center"
					width="180"
					:label="$t('common.actions')"
					fixed="right"
				>
					<template slot-scope="scope">
						<el-button
							v-if="hasPermission('401022')"
							type="primary"
							size="medium"
							@click="openEditDialog(scope.row)"
						>
							{{ $t('common.edit') }}
						</el-button>

						<el-button
							v-if="
								scope.row.status === 0 &&
									hasPermission('401023')
							"
							slot="reference"
							size="small"
							link
							type="success"
							@click="useChannel(scope.row)"
						>
							{{ $t('funds.enable') }}
						</el-button>
						<el-button
							v-if="
								scope.row.status === 1 &&
									hasPermission('401023')
							"
							slot="reference"
							size="small"
							link
							type="danger"
							@click="disableChannel(scope.row)"
						>
							{{ $t('funds.disable') }}
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<el-pagination
				:current-page.sync="pageNum"
				class="pageValue"
				background
				layout="total, sizes,prev, pager, next, jumper"
				:page-size="pageSize"
				:page-sizes="pageSizes"
				:total="total"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
			></el-pagination>
		</template>
		<el-dialog
			:visible.sync="visibleDialog"
			:title="
				formData.id
					? $t('funds.thirdPeymentChannelConfig.pay_the_channel_edit')
					: $t('funds.thirdPeymentChannelConfig.pay_the_channel_add')
			"
			:width="getWidth('800px')"
		>
			<el-form
				ref="dialogFormRef"
				v-loading="loadingDialog"
				:model="formData"
				:rules="editFormRules"
				label-width="auto"
				inline
			>
				<el-form-item
					:label="`${$t('common.choose_merchant')}:`"
					prop="merchantId"
				>
					<merchant-select
						v-model="formData.merchantId"
						:placeholder="$t('common.please_choose')"
						style="width: 230px"
						@change="selectMerchantHandle2"
					></merchant-select>
				</el-form-item>
				<el-form-item
					:label="
						`${$t(
							'funds.thirdPeymentChannelConfig.payment_merchant_name'
						)}:`
					"
					prop="paymentMerchantId"
				>
					<el-select
						v-model="formData.paymentMerchantId"
						:placeholder="$t('common.please_choose')"
						style="width: 230px"
						@change="handlePaymentChannelTypeChangeHandle"
					>
						<el-option
							v-for="item in paymentMerchantList"
							:key="item.id"
							:label="item.paymentMerchantName"
							:value="item.id"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item
					:label="`${$t('funds.channel_name')}:`"
					prop="channelName"
				>
					<el-input
						v-model="formData.channelName"
						:placeholder="
							$t(
								'funds.thirdPeymentChannelConfig.form_rules_tip18'
							)
						"
						maxlength="20"
						style="width: 230px"
						@blur="cleanBlankSpace('formData', 'channelName')"
					></el-input>
				</el-form-item>
				<el-form-item
					:label="
						`${$t(
							'funds.thirdPeymentChannelConfig.pay_parameters'
						)}:`
					"
				>
					<el-select
						v-model="formData.paymentMerchantParam"
						:placeholder="$t('common.please_choose')"
						style="width: 230px"
					>
						<el-option
							v-for="item in payChannelList"
							:key="item.code"
							:value="item.code"
							:label="item.description"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item
					:label="`${$t('funds.pay_type')}:`"
					prop="payType"
				>
					<el-select
						v-model="formData.payType"
						:placeholder="$t('common.please_choose')"
						style="width: 230px"
						@change="payTypeChangeHandle"
					>
						<el-option
							v-for="item in payTypeList"
							:key="item.code"
							:value="item.code"
							:label="item.description"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item
					:label="
						`${$t(
							'funds.thirdPeymentChannelConfig.support_currency'
						)}:`
					"
					prop="currency"
				>
					<el-select
						v-model="formData.currency"
						:placeholder="$t('common.please_choose')"
						style="width: 230px"
						@change="handleCurrencyTypeChangeHandle"
					>
						<el-option
							v-for="item in currencyList"
							:key="item.code"
							:value="item.code"
							:label="item.description"
						></el-option>
					</el-select>
				</el-form-item>
				<template v-for="(bank, index) in formData.bankParamList">
					<template v-if="formData.payType == 1">
						<div :key="index">
							<el-form-item
								:label="`${$t('common.components.card_name')}:`"
							>
								<el-select
									v-model="bank.bankId"
									:placeholder="$t('common.please_choose')"
									style="width: 175px"
								>
									<el-option
										v-for="item in bankDropDownList"
										:key="item.id"
										:value="item.id"
										:label="item.bankName"
										:disabled="getDisabled(item, index)"
									></el-option>
								</el-select>
							</el-form-item>
							<el-form-item :label="`${$t('funds.bank_short')}:`">
								<el-input
									v-model="bank.bankShortName"
									:placeholder="$t('common.please_enter')"
									style="width: 175px"
								></el-input>
							</el-form-item>
							<el-button
								size="medium"
								plain
								type="primary"
								@click.prevent="addBanks"
							>
								+
							</el-button>
							<el-button
								v-if="
									formData.bankParamList.length > 1 &&
										index != 0
								"
								size="medium"
								plain
								type="primary"
								style="margin-left: 0;"
								@click.prevent="removeBanks(index)"
							>
								-
							</el-button>
						</div>
					</template>
				</template>

				<template v-if="formData.payType == 2">
					<el-form-item
						:label="`${$t('选择协议')}:`"
						prop="virtualProtocol"
					>
						<el-select
							v-model="formData.virtualProtocol"
							style="width: 565px"
							multiple
							:placeholder="$t('common.please_choose')"
						>
							<el-option
								v-for="item in virtualProtocolType"
								:key="item.code"
								:value="item.description"
								:label="item.description"
							></el-option>
						</el-select>
					</el-form-item>
				</template>

				<!-- <el-form-item
					:label="
						`${$t('funds.thirdPeymentChannelConfig.paymen_channel_name')}:`
					"
					prop="paymentChannelType"
				>
					<el-select
						v-model="formData.paymentChannelType"
						style="width: 565px"
						:placeholder="$t('common.please_choose')"
						@change="paymentChannelTypeChangeHandle"
					>
						<el-option
							v-for="item in payTypeList2"
							:key="item.code"
							:value="item.code"
							:label="item.description"
						></el-option>
					</el-select>
				</el-form-item> -->

				<el-form-item
					:label="
						`${$t('funds.thirdPeymentChannelConfig.single_limit')}:`
					"
					prop="minAmount"
				>
					<el-input
						v-model="formData.minAmount"
						:placeholder="$t('common.please_enter')"
						style="width: 275px"
						@blur="cleanBlankSpace('formData', 'minAmount')"
					></el-input>
					~
				</el-form-item>
				<el-form-item prop="maxAmount">
					<el-input
						v-model="formData.maxAmount"
						:placeholder="$t('common.please_enter')"
						style="width: 275px"
						@blur="cleanBlankSpace('formData', 'maxAmount')"
					></el-input>
				</el-form-item>
				<el-form-item
					:label="
						`${$t('funds.thirdPeymentChannelConfig.fast_amount')}:`
					"
					prop="fastAmount"
				>
					<el-input
						v-model="formData.fastAmount"
						placeholder="单位$，支持多个金额；用，隔开"
						style="width: 565px"
						:maxLength="50"
					></el-input>
				</el-form-item>
				<el-form-item
					:label="
						`${$t('funds.thirdPeymentChannelConfig.remark_info')}:`
					"
					prop="remark"
				>
					<el-input
						v-model="formData.remark"
						:placeholder="$t('common.please_enter')"
						maxlength="500"
						type="textarea"
						show-word-limit
						v-input="{ name: 'noEmpty' }"
						style="width: 565px"
						clearable
					></el-input>
				</el-form-item>
				<el-form-item
					:label="`${$t('funds.thirdPeymentChannelConfig.other_1')}:`"
					prop="ext1"
				>
					<el-input
						v-model="formData.ext1"
						:placeholder="$t('common.please_enter')"
						style="width: 565px"
					></el-input>
				</el-form-item>
				<el-form-item
					:label="`${$t('funds.thirdPeymentChannelConfig.other_2')}:`"
					prop="ext2"
				>
					<el-input
						v-model="formData.ext2"
						:placeholder="$t('common.please_enter')"
						style="width: 565px"
					></el-input>
				</el-form-item>
			</el-form>
			<template #footer>
				<span>
					<el-button @click="visibleDialog = false">
						{{ $t('common.cancel') }}
					</el-button>
					<el-button type="primary" @click="handleSubmit">
						{{ $t('common.confirm') }}
					</el-button>
				</span>
			</template>
		</el-dialog>
	</main-content>
</template>

<script>
import list from '@/mixins/list'
import { routerNames } from '@/utils/consts'
import MainContent from '@/components/MainContent/index.vue'

export default {
	name: routerNames.thirdWithdrawConfig,
	components: {
		MainContent
	},
	mixins: [list],
	data() {
		this.loadData = this.throttle(this.loadData, 1000)
		return {
			tableHeight: 480,
			otherDependenComponents: [],
			loadingDialog: false,
			queryData: {
				paymentMerchantName: '',
				channelName: '',
				payType: '',
				status: '',
				merchantId: '',
				paymentMerchantType: 2
			},
			type: true,
			formData: {},
			dataList: [],
			visibleDialog: false,
			editFormRules: {
				paymentMerchantName: [
					{
						required: true,
						message: this.$t(
							'funds.thirdPeymentChannelConfig.form_rules_tip1'
						),
						trigger: 'blur'
					},
					{
						validator: (rule, value, callback) => {
							if (!value) {
								callback(
									new Error(
										this.$t(
											'funds.thirdPeymentChannelConfig.form_rules_tip1'
										)
									)
								)
							} else if (value.length < 2 || value.length > 20) {
								callback(
									new Error(
										this.$t(
											'funds.thirdPeymentChannelConfig.form_rules_tip2'
										)
									)
								)
							} else {
								callback()
							}
						},
						trigger: 'blur'
					}
				],
				paymentMerchantCode: [
					{
						required: true,
						message: this.$t(
							'funds.thirdPeymentChannelConfig.form_rules_tip3'
						),
						trigger: 'blur'
					},
					{
						validator: (rule, value, callback) => {
							if (!value) {
								callback(
									new Error(
										this.$t(
											'funds.thirdPeymentChannelConfig.form_rules_tip3'
										)
									)
								)
							} else if (value.length < 2 || value.length > 200) {
								callback(
									new Error(
										this.$t(
											'funds.thirdPeymentChannelConfig.form_rules_tip2'
										)
									)
								)
							} else {
								callback()
							}
						},
						trigger: 'blur'
					}
				],
				paymentMerchantParam: [
					{
						required: true,
						message: this.$t(
							'funds.thirdPeymentChannelConfig.form_rules_tip19'
						),
						trigger: 'change'
					}
				],
				channelName: [
					{
						required: true,
						message: this.$t(
							'funds.thirdPeymentChannelConfig.form_rules_tip4'
						),
						trigger: 'change'
					},
					{
						validator: (rule, value, callback) => {
							if (!value) {
								callback(
									new Error(
										this.$t(
											'funds.thirdPeymentChannelConfig.form_rules_tip4'
										)
									)
								)
							} else if (value.length < 4 || value.length > 20) {
								callback(
									new Error(
										this.$t(
											'funds.thirdPeymentChannelConfig.form_rules_tip18'
										)
									)
								)
							} else {
								callback()
							}
						},
						trigger: 'blur'
					}
				],
				payType: [
					{
						required: true,
						message: this.$t(
							'funds.thirdPeymentChannelConfig.form_rules_tip6'
						),
						trigger: 'change'
					}
				],
				paymentChannelType: [
					{
						required: true,
						message: this.$t(
							'funds.thirdPeymentChannelConfig.form_rules_tip7'
						),
						trigger: 'change'
					}
				],
				paymentMerchantId: [
					{
						required: true,
						message: this.$t(
							'funds.thirdPeymentChannelConfig.form_rules_tip1'
						),
						trigger: 'change'
					}
				],
				merchantId: [
					{
						required: true,
						message: this.$t(
							'funds.deposit_and_withdraw_config.form_rules_tip23'
						),
						trigger: 'change'
					}
				],
				currency: [
					{
						required: true,
						message: this.$t(
							'funds.thirdPeymentChannelConfig.form_rules_tip8'
						),
						trigger: 'change'
					}
				],
				minAmount: [
					{
						required: true,
						message: this.$t(
							'funds.thirdPeymentChannelConfig.form_rules_tip9'
						),
						trigger: 'change'
					},
					{
						validator: (rule, value, callback) => {
							if (isNaN(this.formData.minAmount)) {
								callback(
									new Error(
										this.$t(
											'funds.thirdPeymentChannelConfig.form_rules_tip10'
										)
									)
								)
							} else if (
								+this.formData.minAmount >=
									+this.formData.maxAmount &&
								this.formData.maxAmount
							) {
								callback(
									new Error(
										this.$t(
											'funds.thirdPeymentChannelConfig.form_rules_tip11'
										)
									)
								)
							} else if (Number(this.formData.minAmount) <= 0) {
								callback(
									new Error(
										this.$t(
											'funds.thirdPeymentChannelConfig.integer'
										)
									)
								)
							} else if (
								(this.formData.minAmount + '').includes('.')
							) {
								callback(
									new Error(
										this.$t(
											'funds.thirdPeymentChannelConfig.integer'
										)
									)
								)
							} else {
								callback()
							}
						},
						trigger: 'blur'
					}
				],
				maxAmount: [
					{
						required: true,
						message: this.$t(
							'funds.thirdPeymentChannelConfig.form_rules_tip9'
						),
						trigger: 'change'
					},
					{
						validator: (rule, value, callback) => {
							if (isNaN(this.formData.maxAmount)) {
								callback(
									new Error(
										this.$t(
											'funds.thirdPeymentChannelConfig.form_rules_tip9'
										)
									)
								)
							} else if (Number(this.formData.maxAmount) <= 0) {
								callback(
									new Error(
										this.$t(
											'funds.thirdPeymentChannelConfig.integer'
										)
									)
								)
							} else if (
								(this.formData.minAmount + '').includes('.') ||
								(this.formData.maxAmount + '').includes('.')
							) {
								callback(
									new Error(
										this.$t(
											'funds.thirdPeymentChannelConfig.integer'
										)
									)
								)
							} else {
								callback()
							}
						},
						trigger: 'blur'
					}
				],
				virtualProtocol: [
					{
						required: true,
						message: this.$t(
							'funds.thirdPeymentChannelConfig.form_rules_tip17'
						),
						trigger: 'change'
					}
				],
				privateKey: [
					{
						required: true,
						message: this.$t(
							'funds.thirdPeymentChannelConfig.form_rules_tip13'
						),
						trigger: 'change'
					}
				],
				requestUrl: [
					{
						required: true,
						message: this.$t(
							'funds.thirdPeymentChannelConfig.form_rules_tip14'
						),
						trigger: 'change'
					}
				],
				remark: [
					{
						required: true,
						message: this.$t(
							'funds.thirdPeymentChannelConfig.form_rules_tip15'
						),
						trigger: 'change'
					},
					{
						min: 2,
						max: 500,
						message: this.$t(
							'funds.thirdPeymentChannelConfig.form_rules_tip2'
						),
						trigger: 'blur'
					}
				]
			},
			payChannelList: [],
			// 支付厂商列表
			paymentMerchantList: [],
			// 银行下拉列表
			bankDropDownList: [],
			payTypeList2: []
		}
	},
	computed: {
		payTypeList() {
			return this.globalDics.withdrawMemberPaymentType || []
		},
		// payChannelList() {
		// 	return this.globalDics.paymentChannelType || []
		// },
		currencyList() {
			return this.globalDics.paymentCurrencyType || [[]]
		},
		virtualProtocolType() {
			return this.globalDics.virtualProtocolType || []
		}
	},
	mounted() {
		this.queryData.merchantId = this.$store.getters.userInfo.merchantId
		if (this.queryData.merchantId === '0') {
			this.queryData.merchantId = null
		}
		// this.loadData()
		this.getPaymentMerchantList(this.queryData.merchantId)
	},
	methods: {
		getDisabled(item, index) {
			const condition = JSON.parse(
				JSON.stringify(this.formData.bankParamList)
			)
			condition.splice(index, 1)
			const columns = condition.map((v) => v.bankId).filter(Boolean)
			return columns.includes(item.id)
		},
		selectMerchantHandle(merchantId) {
			this.getPaymentMerchantList(merchantId)
			if (this.queryData.paymentMerchantId) {
				this.queryData.paymentMerchantId = ''
			}
		},
		selectMerchantHandle2(merchantId) {
			this.getPaymentMerchantList(merchantId)
			if (this.formData.paymentMerchantId) {
				this.formData.paymentMerchantId = ''
			}
		},
		async payTypeChangeHandle(value) {
			const target = this.payTypeList.find((item) => item.code === value)
			if (target.code === '1') {
				this.formData.currency = 'CNY'
			} else if (target.code === '2' || target.code === '8' || target.code === '9') {
				this.formData.currency = 'USDT'
			}
			// const res = await this.$api.triggerDepositChannel(this.formData.payType)
			// this.payTypeList2 = res.data
			// if (this.formData.paymentChannelType) {
			// 	this.formData.paymentChannelType = ''
			// }

			if (target) {
				this.formData.payTypeName = target.description
			}
		},
		cleanBlankSpace(key, key1) {
			if (this[key][key1]) {
				this[key][key1] = (this[key][key1] + '').replace(/\s+/g, '')
			}
		},
		getPaymentMerchantList(merchantId) {
			this.$api
				.queryPaymentMerchantList({
					merchantId: merchantId,
					paymentMerchantType: 2
				})
				.then((res) => {
					const { code, data } = res
					if (code === 200) {
						this.paymentMerchantList = data || []
					}
				})
		},
		async handleCurrencyTypeChangeHandle() {
			return this.getSelectBankDropDownList(this.formData.currency)
		},
		getSelectBankDropDownList(currency) {
			return new Promise((resolve, reject) => {
				this.$api
					.querySelectBankDropDownList({
						pageNum: 1,
						pageSize: 10,
						currency
					})
					.then((res) => {
						const { code, data } = res
						if (code === 200) {
							resolve()
							this.bankDropDownList = data || []
							this.formData.bankParamList.map((item) => {
								item.bankId = ''
							})
						}
					})
			})
		},
		loadData() {
			// if (!this.queryData.merchantId) {
			// 	this.dataList = []
			// 	return
			// }
			this.loading = true
			let params = {
				...this.queryData
			}
			params = {
				...this.getParams(params)
			}
			delete params.time
			this.$api
				.queryPaymentMerchantConfigList(params)
				.then((res) => {
					this.loading = false
					const {
						code,
						data: { record, totalRecord },
						msg
					} = res
					if (code === 200) {
						this.dataList = record || [{}, {}]
						this.total = totalRecord || 0
					} else {
						this.loading = false
						this.$message({
							message: msg,
							type: 'error'
						})
					}
				})
				.catch(() => {
					this.loading = false
				})
		},
		reset() {
			this.queryData = {
				paymentMerchantName: '',
				channelName: '',
				payType: '',
				status: '',
				paymentMerchantType: 2
			}
			this.pageNum = 1
			this.loadData()
		},
		// 支付参数联动
		async handlePaymentChannelTypeChangeHandle(paymentMerchantId) {
			await this.handlePaymentChannelTypeChange({
				paymentMerchantId,
				paymentMerchantType: 2
			})
		},
		async handlePaymentChannelTypeChange(params) {
			const res = await this.$api.triggerPaymentChannelParam(params)
			this.payChannelList = res.data || []
			if (this.formData.paymentMerchantParam) {
				this.formData.paymentMerchantParam = ''
			}
		},
		async openEditDialog(row) {
			this.visibleDialog = true
			this.loadingDialog = true
			this.formData = {
				bankParamList: [],
				paymentMerchantParam: '',
				...row
			}

			this.$nextTick(async () => {
				if (this.formData.id) {
					const {
						paymentMerchantId,
						currency,
						virtualProtocol,
						payParamCode,
						paymentChannelType
					} = row
					if (currency) {
						await this.handleCurrencyTypeChangeHandle()
					}

					if (virtualProtocol) {
						const virtualProtocol2 = virtualProtocol.split(',')
						const temp = []
						for (const it1 of this.virtualProtocolType) {
							for (const it2 of virtualProtocol2) {
								if (it1.description === it2) {
									temp.push(it1.code)
								}
							}
						}
						this.formData.virtualProtocol = virtualProtocol2
					}

					this.formData.payType = this.formData.payType + ''
					await this.handlePaymentChannelTypeChange({
						paymentMerchantId,
						paymentMerchantType: 1
					})
					this.formData.currency = this.formData.currency + ''

					if (payParamCode) {
						this.formData.paymentMerchantParam = payParamCode
					}
					if (paymentChannelType) {
						await this.payTypeChangeHandle(paymentChannelType)
					}
					this.formData.paymentChannelType =
						row.paymentChannelType + ''

					if (row.bankInfo) {
						const banks = JSON.parse(row.bankInfo)
						const bankParamList = []
						// 过滤出未匹配上的银行
						for (const bank of banks) {
							for (const bankdrop of this.bankDropDownList) {
								if (bankdrop.id === bank.bankId) {
									bankParamList.push(bank)
								}
							}
						}
						this.formData.bankParamList = bankParamList.map(
							(item) => {
								return {
									...item,
									bankId: item.bankId + ''
								}
							}
						)
					} else {
						this.formData.bankParamList.push({
							bankId: '',
							bankShortName: ''
						})
					}
				} else {
					this.formData.bankParamList.push({
						bankId: '',
						bankShortName: ''
					})
				}
				this.$refs.dialogFormRef &&
					this.$refs.dialogFormRef.clearValidate()
			})
			this.loadingDialog = false
			setTimeout(() => {
				this.$refs.dialogFormRef &&
					this.$refs.dialogFormRef.clearValidate()
			}, 1000)
		},
		addBanks() {
			this.formData.bankParamList.push({ bankId: '', bankShortName: '' })
		},
		removeBanks(index) {
			// this.formData.bankParamList[index]['bankId'] = ''
			this.formData.bankParamList.splice(index, 1)
		},
		handleSubmit() {
			const params = {
				...this.formData,
				paymentMerchantType: 2,
				maxAmount: +this.formData.maxAmount,
				minAmount: +this.formData.minAmount
			}
			if (params.bankParamList && params.bankParamList.length) {
				params.bankParamList = params.bankParamList.filter(
					(item) => item.bankId
				)
			}
			if (params.virtualProtocol) {
				params.virtualProtocol = params.virtualProtocol.join()
			}
			this.$refs.dialogFormRef.validate((valid) => {
				if (valid) {
					const loading = this.$loading({
						lock: true,
						text: 'Loading',
						spinner: 'el-icon-loading',
						background: 'rgba(0, 0, 0, 0.7)'
					})
					if (params.id) {
						this.$api
							.paymentMerchantConfigUpdate(params)
							.then((res) => {
								if (res.code === 200) {
									this.$message({
										message: this.$t('common.edit_success'),
										type: 'success'
									})
									this.visibleDialog = false
									this.loadData()
								}
								loading.close()
							})
							.catch(() => {
								loading.close()
							})
					} else {
						this.$api
							.paymentMerchantConfigAdd(params)
							.then((res) => {
								if (res.code === 200) {
									this.$message({
										message: this.$t('common.add_success'),
										type: 'success'
									})
									this.visibleDialog = false
									this.loadData()
								}
								loading.close()
							})
							.catch(() => {
								loading.close()
							})
					}
				}
			})
		},
		useChannel(row) {
			const str = `<strong>${this.$t(
				'funds.thirdPeymentChannelConfig.use_channel_tip1'
			)}</strong></br><span style='font-size:12px;color:#c1c1c1'>${this.$t(
				'funds.thirdPeymentChannelConfig.disable_channel_tip2'
			)}</span>`

			this.$confirm(str, this.$t('common.success_tip'), {
				dangerouslyUseHTMLString: true,
				confirmButtonText: this.$t('common.confirm'),
				cancelButtonText: this.$t('common.cancel'),
				type: 'warning'
			})
				.then(() => {
					this.$api
						.paymentMerchantConfigStartOrStop({
							id: row.id,
							paymentMerchantType: 2,
							status: 1
						})
						.then((res) => {
							this.$message({
								message: this.$t(
									'funds.thirdPeymentChannelConfig.use_success_tip'
								),
								type: 'success'
							})
							this.loadData()
						})
				})
				.catch(() => {})
		},
		disableChannel(row) {
			const str = `<strong>${this.$t(
				'funds.thirdPeymentChannelConfig.disable_channel_tip1'
			)}</strong></br><span style='font-size:12px;color:#c1c1c1'>${this.$t(
				'funds.thirdPeymentChannelConfig.disable_channel_tip2'
			)}</span>`

			this.$confirm(str, this.$t('common.success_tip'), {
				dangerouslyUseHTMLString: true,
				confirmButtonText: this.$t('common.confirm'),
				cancelButtonText: this.$t('common.cancel'),
				type: 'warning'
			})
				.then(() => {
					this.$api
						.paymentMerchantConfigStartOrStop({
							id: row.id,
							paymentMerchantType: 2,
							status: 0
						})
						.then((res) => {
							if (res.code === 200) {
								this.$message({
									message: this.$t(
										'funds.thirdPeymentChannelConfig.disable_success_tip'
									),
									type: 'success'
								})
								this.loadData()
							}
						})
				})
				.catch(() => {})
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
	text-align: center;
	color: #909399;
	font-weight: 700;
}
::v-deep .caret-wrapper {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}
.data-refresh {
	margin-top: 0;
	padding-bottom: 20px;
}
.look {
	//background-color: #00BFBF;
	//border-color: #00BFBF;
	color: #00bfbf;
}
</style>
